<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<%@ page contentType="text/html;charset=UTF-8" language="java"  %>
<%@page isELIgnored="true" %>
<html>
<head>
    <title>员工管理</title>
    <%@include file="/comm/head.jsp"%>
</head>
<body>
<div id="root">
    <modal v-model="uploadFlag" title="上传工作照" @on-ok="updateAttach" >
    <i-form :label-width="80">
     <form-item label="工作照:">
         <upload  action="renshi/user/upload" name="attach" :before-upload="doBeforeUpload" :on-success="uploadSuccess">
             <i-button icon="ios-cloud-upload-outline">请选择..</i-button>
         </upload>
         <div class="img" :style="{'background-image':'url('+img+')'}" v-if="img"></div>
     </form-item>
     <form-item label="照片描述:">
         <i-input type="textarea" v-model="uploadForm.attachDescr"/>
     </form-item>
      </i-form>
    </modal>
<Collapse value="search">
    <Panel name="search">
        条件查询
        <p slot="content">
            <i-form inline :label-width="80" >
        <form-item label="登录名:">
            <i-input type="text" v-model="userVo1.userCode"/>
        </form-item>
                <form-item label="姓名:">
                    <i-input type="text" v-model="userVo1.username"/>
                </form-item>
                <form-item label="性别:">
                    <radio-group v-model="userVo1.gender">
                        <radio :label="1">男</radio>
                        <radio :label="2">女</radio>
                    </radio-group>
                </form-item>
                <form-item label="邮箱:">
                    <i-input type="text" v-model="userVo1.email"/>
                </form-item>
                <form-item label="电话:">
                    <i-input type="text" v-model="userVo1.phone"/>
                </form-item>
                <form-item label="地址:">
                    <i-input type="text" v-model="userVo1.address"/>
                </form-item>
                <form-item label="出生日期:"style="margin-left:30px">
                    <row>
                    <col span="12"> <date-picker @on-change="userVo1.startDate=$event"  placeHolder="请输入起始日期" style="width: 150px;" type="date" ></date-picker></col>
                        <col span="12"> <date-picker @on-change="userVo1.endDate=$event"   placeHolder="请输入结束日期" style="width: 150px" type="date" ></date-picker></col>
                    </row>
                </form-item>
                <form-item label="部门:">
                    <i-select v-model="userVo1.orgId" style="width: 160px" filterable>
                        <i-option value="">--不限--</i-option>
                        <i-Option v-for="item in orgList" :value="item.id" :key="item.id">{{item.orgName}}</i-Option>
                    </i-select>
                </form-item>
<shiro:hasPermission name="user:search">
                    <i-button type="primary"icon="ios-search" style="margin-left:40px" @click="pageNo=1;searchUserList();">搜索</i-button>
</shiro:hasPermission>
    <i-button type="success"icon="md-sync" @click="userVo1={};searchUserList();pageNo=1"></i-button>
    </i-form>
        </p>
    </Panel>
</Collapse>
    <card>
<shiro:hasPermission name="user:add">
        <i-button type="success"@click="toAdd" icon="md-add">添加员工</i-button>
</shiro:hasPermission>
        <i-button type="info" @click="exportExcel">导出Excel</i-button>
        <i-button type="error" @click="exportPdf">打印浏览</i-button>
<!--<shiro:hasPermission name="user:grant">
        <i-button type="primary" @click="toGrant">员工授权</i-button>
</shiro:hasPermission>-->
    </card>

    <i-table ref="table"  :columns="columns" :data="pageResult.rows" :height="300" border stripe  @on-selection-change="tableSelection=arguments[0]"  ><!-- @on-row-click="handleChange"-->
        <template slot-scope="{row}" slot="gender">
            <span>{{row.gender==1?"男":"女"}}</span>
        </template>
        <template slot-scope="{row}" slot="orgName">
            <span>{{row.org.orgName}}</span>
        </template>
        <template slot-scope="{row}" slot="attachPath">
            <img :src="row.attachPath" alt="" width="50">
        </template>

        <template slot-scope="{row,index}"  slot="action">
<shiro:hasPermission name="user:update">
            <i-button type="warning" @click="toUpdate(row)"><Icon type="ios-build" /></i-button>
</shiro:hasPermission>
<shiro:hasPermission name="user:del">
    <i-button type="error" @click="del(row,index)"><Icon type="md-close-circle" /></i-button>
</shiro:hasPermission>
<shiro:hasPermission name="user:upload">
    <i-button type="info"@click="toUpload(row)"><Icon type="ios-cloud-done" /></i-button>
</shiro:hasPermission>
<shiro:hasPermission name="user:pwd">
            <i-button type="success"@click="toUpdatepwd(row)"><Icon type="md-build" /></i-button>
</shiro:hasPermission>
        </template>
    </i-table>


  <!--  <modal v-model="grantFlag" title="员工授权"  @on-ok="grant">
        <!--<tree ref="tree" :data="treeData" show-checkbox multiple style="margin-left:80px "></tree>-->
      <!--  <i-table   height="400"ref="table" :columns="myColumns" :data="treeData" border stripe  style="height:400px"  @on-selection-change="tableSelection1=arguments[0]">
        </i-table>
    </modal>-->
    <modal v-model="updateFlag" title="修改员工" @on-ok="update">
        <i-form :label-width="80" style="padding: 30px" >
            <form-item label="登录名" prop="userCode">
                <i-input v-model="user.userCode" size="large" />
            </form-item>
            <form-item label="员工名称"prop="username">
                <i-input v-model="user.username" size="large"/>
            </form-item>
            <form-item label="员工电话"prop="phone">
            <i-input v-model="user.phone" size="large"/>
        </form-item>
            <form-item label="员工生日"prop="birthday">
                <i-input v-model="user.birthday" size="large"type="date"/>
            </form-item>
            <form-item label="员工地址"prop="address">
                <i-input v-model="user.address" size="large"/>
            </form-item>
            <form-item label="邮箱"prop="email">
                <i-input v-model="user.email" size="large"/>
            </form-item>
            <form-item label="部门:">
                <i-select v-model="user.orgId" style="width: 110px" filterable>
                    <i-Option v-for="item in orgList" :value="item.id" :key="item.id">{{item.orgName}}</i-Option>
                </i-select>
            </form-item>
          <!--  <form-item label="修改时间">
                <%--<date-picker type="datetime" format="yyyy-MM-dd HH:mm" v-model="role.modifyDate" size="large"/>--%>
                <%-- <date-picker type="datetime" format="yyyy-MM-dd HH:mm" :value="role.modifyDate" size="large"/>--%>
                <date-picker type="datetime" format="yyyy-MM-dd HH:mm" v-model="user.modifyDate" size="large"/>
                <%--<i-input  v-model="role.modifyDate" size="large"/>--%>
            </form-item>-->
        </i-form>
    </modal>
    <modal v-model="addFlag" title="添加员工" >
        <i-form ref="user" :model="user"   v-model="user"  :label-width="80" style="padding: 30px"  :rules="ruleValidate" >
            <form-item label="登录名"prop="userCode">
                <i-input v-model="user.userCode" size="large" />
            </form-item>
            <form-item label="员工名称"prop="username">
                <i-input v-model="user.username" size="large"/>
            </form-item>
            <!--<form-item label="员工密码">
                <i-input v-model="user.password" size="large"/>
            </form-item>-->
            <form-item label="用户性别" prop="gender">
                <!--<i-input v-model="user.gender6" size="large"/>-->
                <radio-group v-model="user.gender">
                  <radio :label="1">男</radio>
                    <radio :label="2">女</radio>
                </radio-group>
            </form-item>
            <form-item label="员工电话"prop="phone">
                <i-input v-model="user.phone" size="large"/>
            </form-item>
            <form-item label="员工生日"prop="birthday">
                <i-input v-model="user.birthday" size="large" type="date"/>
            </form-item>
            <form-item label="员工地址"prop="address">
                <i-input v-model="user.address" size="large"/>
            </form-item>
            <form-item label="邮箱"prop="email">
                <i-input v-model="user.email" size="large" type="email"/>
            </form-item>
            <form-item label="部门:" prop="orgId">
                <i-select v-model="user.orgId" style="width: 110px" filterable>
                    <i-Option v-for="item in orgList" :value="item.id" :key="item.id">{{item.orgName}}</i-Option>
                </i-select>
            </form-item>

            <i-button style="margin-left:300px ;bottom: 12px;" type="primary" size="large" @click="add('user')">提交</i-button>
            <i-button   type="error" size="large" @click="cancel('user')" >取消</i-button>
        </i-form>
        <div slot="footer" >
        </div>
    </modal>
    <modal v-model="updateFlagpwd" title="修改员工密码" @on-ok="updatepwd">
        <i-form :label-width="80" style="padding: 30px" >
            <form-item label="员工名称">
                <i-input v-model="user.username" size="large" readonly />
            </form-item>
            <form-item label="员工密码">
                <i-input v-model="user.password" type="password" size="large"/>
            </form-item>
        </i-form>
    </modal>
 <!--  <modal v-model="serchFlag" title="员工详细信息" >
        <i-table :columns="myColumns" :data="mydata" :height="200" border stripe >
            <template slot-scope="{row}" slot="gender">
                <span>{{row.gender==1?"男":"女"}}</span>
            </template>
        </i-table>
    </modal>-->
<%--<Page :total="pageResult.total" :page-size="pageSize" @on-change="changePageNo"/>--%>
  <Page :total="pageResult.total"
        :page-size="pageSize"
       <%-- :current.sync="pageNo"--%>
          @on-change="pageNo=arguments[0];searchUserList();"
       <%-- @on-change="searchUserList"--%>
        show-sizer
        :page-size-opts="[5,10,15]"
       <%-- @on-page-size-change="changPageSize"--%>
        @on-page-size-change="pageSize=arguments[0];searchUserList();"
  />
</div>
<script type="text/javascript">
    new Vue({
        el:"#root",
        data:{
            columns:[
            {key:"userCode",title:"登录名",width:100,align:"center"},
            {key:"username",title:"姓名",width:100,align:"center"},
            {slot:"gender",title:"性别",width:70 ,align:"center"},
            {key:"birthday",title:"生日",width:120,align:"center"},
            {key:"phone",title:"手机号",width:140,align:"center"},
            {key:"email",title:"邮箱",width:120,align:"center"},
            {slot:"orgName",title:"部门",width:80,align:"center"},
            {title:"工作照",slot: "attachPath",width:90},
            {title:"操作",slot:"action",align:"center"}
        ],
            myColumns:[
                {key:"userCode",title:"登录名", width:100,},
                {key:"username",title:"姓名", width:100},
                {slot:"gender",title:"性别" , width:65},
                {key:"birthday",title:"生日", width:120},
                {key:"phone",title:"手机号", width:100},
                {key:"email",title:"邮箱", width:100},
                {key:"address",title:"用户地址", width:100},
                {title:"工作照",slot: "attachPath", width:100},
            ],
            ruleValidate: {
                userCode: [
                    {required: true, message: '请输入登录名', trigger: 'blur'}
                ],
                username: [
                    {required: true, message: '请输入员工名称', trigger: 'blur'}
                ],
                phone: [
                    {required: true, message: '请输入电话', trigger: 'blur'},
                    { type: 'number', message: '请输入正确的电话号码', trigger: 'blur',transform:(value) => Number(value)}
                ],
                gender: [
                    { required: true,type:'number', message: '请选择性别', trigger: 'change' }
                ],
                birthday: [
                   {required: true,message: '请输入员工生日', trigger: 'blur'}
               ],
                address: [
                    {required: true, message: '请输入员工地址', trigger: 'blur'}
                ],
                email: [
                    { required: true, message: '请输入邮箱', trigger: 'blur' },
                    { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
                ],
                orgId: [
                  {required: true,type:'number', message: '请选择员工部门', trigger: 'change'}
    ],
            },
         /*   myColumns:[
                {type:"selection",width:60,align:"center"},
                { key:"roleName",title:"角色名称"},
                { key:"roleCode",title:"角色代号"},
                ],*/
      //  data:[],
            pageResult:{
                rows:[],
                total:50,
            },
            mydata:[],
            userVo1:{},
            orgList:[],
            user:{},
            //grantFlag:false,
            //treeData:[],
            tableSelection:[],
            tableSelection1:[],
            pageNo:1,
            pageSize:5,
            uploadFlag:false,
            updateFlag:false,
            updateFlagpwd:false,
            addFlag:false,
            serchFlag:false,
            uploadForm:{
                id:null,
                attachPath:null,
                attachDescr:null,
            },
            img:null
        },
       methods:{

            searchUserList(){
              /*  axios.get(`${ctx}/sys/user/list`,Qs.stringify(this.userVo))*/
               axios.get(`${ctx}/renshi/user/search/${this.pageNo}/${this.pageSize}`,{params:this.userVo1})
                    .then(({data})=>{
                        this.pageResult=data.result;
                    });
            },

           searchOrgList(){
               axios.get(`${ctx}/renshi/bumen/list`)
                   .then(({data})=>{
                       this.orgList=data.result;
                   });
           },
          /* changPageSize(){
               this.pageSize=arguments[0];
               this.searchUserList();
           },*/
          /* changPageSize(pageSize){
                this.pageSize=pageSize;
                this.searchUserList();
           },*/
          /* changePageNo(pageNo){
        this.pageNo=pageNo;
        this.searchUserList();
           }*/
       /*    toGrant(){
               if(this.tableSelection.length!=1) {
                   iview.Modal.error({
                       title:"信息提示",
                       content:"请选择一项只能选择一项待授权"
                   });
                   return;
               } /*  axios.get(`${ctx}/sys/role/search4Tree/${this.tableSelection[0].id}`)*/
               /*axios.get(`${ctx}/sys/role/search4Tree`,{params:{id:${this.tableSelection[0].id}}})*/
           /*    axios.get(`${ctx}/renshi/user/search4Tree?id=${this.tableSelection[0].id}`)
                   .then(({data})=>{
                       this.treeData=data.result;
                       this.grantFlag=true;
                   });
           },
           grant(){
               if(this.tableSelection1.length!=1) {
                   iview.Modal.error({
                       title:"信息提示",
                       content:"请选择一项且只能选择一个员工"
                   });
                   return;
               }
               var params=`userId=${this.tableSelection[0].id}`;
               var arr2= `roleId=${this.tableSelection1[0].id}`;
              // this.$refs.table.$refs.tbody.objData[index]._isChecked = true
             //  let arr=this.$refs.tree.getCheckedAndIndeterminateNodes();
               //   let str= arr.map(node=>"roleId="+node.id).join("&");
               params+="&"+arr2;
               axios.get(`${ctx}/renshi/user/grant?${params}`)
                   .then(({data})=>{
                       this.grantFlag=false;//关闭模态框
                       iview.Message.success({content:data.msg});
                   });
               this.searchUserList()

           },*/
           toUpload(row){
               this.uploadForm.id=row.id;
               this.uploadFlag = true;
           },
           doBeforeUpload(file){
               const reader=new FileReader();
         reader.readAsDataURL(file);
                 reader.onloadend=()=>{
               this.img=reader.result;
}
           },
           uploadSuccess(response){
               console.log(response);
               this.uploadForm.attachPath=response.result.attachPath;
               iview.Message.success("上传成功！");
           },
           updateAttach(){
               axios.post(`${ctx}/renshi/user/updateAttach`,this.uploadForm)
                   .then(({data})=>{
                       this.updateFlag=false;
                       iview.Message.success(data.msg);
                       this.searchUserList();
                   });
           },
           toUpdate(row){
               Object.assign(this.user,row);
               this.updateFlag=true;
           },
           update(){
               if(this.user.phone.length!=11) {
                   return this.$Message.error('修改失败!电话号码必须为11位');
               }
               if(this.user.userCode=="") {
                   return this.$Message.error('修改失败!登录名不能为空');
               }
               if(this.user.username=="") {
                   return this.$Message.error('修改失败!员工姓名不能为空');
               }
               if(this.user.birthday=="") {
                   return this.$Message.error('修改失败!员工生日不能为空');
               }
               if(this.user.address=="") {
                   return this.$Message.error('修改失败!员工地址不能为空');
               }
               if(this.user.email=="") {
                   return this.$Message.error('修改失败!员工邮箱不能为空');
               }
               if(!/(\S)+[@]{1}(\S)+[.]{1}(\w)+/.test(this.user.email)) {
                       return this.$Message.error('修改失败!员工邮箱格式错误');
               }
               let params=Qs.stringify(this.user,{serializeDate:(date)=> {
                       return  moment(date).format("YYYY-MM-DD HH:mm");
                   }});
               axios.post(`${ctx}/renshi/user/update`,Qs.parse(params))
                   .then(({data})=>{
                       this.updateFlag=false;//关闭模态框
                       iview.Message.success({content:data.msg});
                       this.searchUserList();
                   });
           },
           toUpdatepwd(row){
               Object.assign(this.user,row);
               this.updateFlagpwd=true;
           },
           updatepwd(){
               axios.post(`${ctx}/renshi/user/updatepwd`,this.user)
                   .then(({data})=>{
                       this.updateFlagpwd=false;//关闭模态框
                       iview.Message.success({content:data.msg});
                       this.searchUserList();
                   });
           },
           del(row,index){
               let _this=this;
               let flag= iview.Modal.confirm({
                   title:"您确实要删除么？",
                   content:"该操作不可逆，请谨慎操作。",
                   onOk(){
                       axios.get(`${ctx}/renshi/user/del?id=${row.id}`)
                           .then(({data})=>{
                               iview.Message.success({content:data.msg});
                               //_this.search();
                               _this.pageResult.rows.splice(index,1);
                           });
                   }
               });
           },
           toAdd(){
               this.user = {};
               this.addFlag=true;

           },
           add(name){
             /*  this.$refs.user.validate((valid) => {
                   if (valid) {
                       this.$Message.success('Success!');*/
               this.$refs[name].validate((valid) => {
                       if (valid) {
                           if(this.user.phone.length!=11) {
                               return this.$Message.error('添加失败!电话号码必须为11位');
                           }
                       axios.post(`${ctx}/renshi/user/add`,this.user)
                           .then(({data})=>{
                               this.addFlag=false;//关闭模态框
                               iview.Message.success({content:data.msg});
                               this.searchUserList();

                           });
                       }else {
                           this.$Message.error('添加失败!');
                       }
               })
           },
           cancel(name){
               this.$refs[name].resetFields();
               this.addFlag=false;
           },
           exportExcel(){
               location.href=`${ctx}/sys/user/exportExcel`;
           },
           exportPdf(){
               location.href=`${ctx}/sys/user/exportPdf`;

           }
         /*  handleChange(data,index){//data 该行数据 ，index该行索引
                this.$refs.table.toggleSelect(index);
               axios.get(`${ctx}/renshi/user/list1?id=${this.tableSelection[0].id}`)
                   .then(({data})=>{
                       this.mydata=data.result;
                       this.serchFlag=true;
                   });
           },*/
           /*handleReset (name) {
               this.$refs[name].resetFields();
           },*/
       },
        mounted(){
           this.searchOrgList();
           this.searchUserList();
        },

    });
</script>
</body>
</html>
